<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>登录/注册</title>
		<link rel="stylesheet" type="text/css" href="css/mdui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<script type="text/javascript" src="js/mdui.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/login.js" ></script>	

  </head>
	<body>
		<!--header-->
	<div class="mdui-container mdui-hoverable" id="container">
		<!--导航-->
	  	<div class="mdui-tab " mdui-tab>
		    <a href="#login" class="mdui-ripple" id="nav1">登录</a>
		    <a href="#regist" class="mdui-ripple" id="nav2">注册</a>
	 	</div>
	  
	  	<!--登录模块-->
		<div id="login" class="mdui-p-a-2">
						
						<div class="mdui-tab mdui-tab-centered" mdui-tab>
              <a href="#example1-tab1" class="mdui-ripple">
              	  <i class="mdui-icon material-icons">account_circle</i>
                  <label>用户名密码登录</label>
              </a>
              <a href="#example1-tab2" class="mdui-ripple">
              	  <i class="mdui-icon material-icons">phone</i>
                  <label>手机验证码登录</label>
              </a>
            </div>
            <div id="example1-tab1" class="mdui-p-a-2">
			<form action="${pageContext.request.contextPath }/UserServlet" method="post">
				<div style="text-align:center;"><span style="color:red;">${message }</span></div>
				
				<input type="hidden" name="method" value="login">
				<div class="mdui-textfield mdui-textfield-floating-label">
					    <i class="mdui-icon material-icons">account_circle</i>
					    <label class="mdui-textfield-label">User name</label>
					    <input id="s-username" class="mdui-textfield-input" type="text" required name="username"  value="${user.username }"/>
					    <div class="mdui-textfield-error">用户名不能为空</div>
					    <div class="mdui-textfield-helper">请输入用户名</div>
				</div>
			
				<div class="mdui-textfield mdui-textfield-floating-label">
						<i class="mdui-icon material-icons">lock</i>
					    <label class="mdui-textfield-label">Password</label>
					    <input id="password" class="mdui-textfield-input" type="password" required name="password" value="${user.password }"/>
					    <div class="mdui-textfield-error">密码不能为空</div>
					    <div class="mdui-textfield-helper">请输入密码</div>
				</div>
			
				<input type="submit" class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple "  id="submit-login" value="登录" />
				<!--mdui-dialog="{target: '#example-1'}"-->
				
			</form>
			
			</div>
			            <!--手机验证码登录-->
            <div id="example1-tab2" class="mdui-p-a-2">
            	<form action="/login" method="post">
				<!--手机号-->
				<div class="mdui-textfield mdui-textfield-floating-label">
					    <i class="mdui-icon material-icons">phone</i>
					    <label class="mdui-textfield-label">phone</label>
					    <input class="mdui-textfield-input" type="text" required/ maxlength="11">
					    <div class="mdui-textfield-error">手机号不能为空</div>
				</div>
			  <input type="button" class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple " id="acquire-verification" value="获取验证码" />
				<div class="mdui-textfield mdui-textfield-floating-label">
						<i class="mdui-icon material-icons">lock</i>
					    <label class="mdui-textfield-label">Verification</label>
					    <input class="mdui-textfield-input" type="text" required/>
					    <div class="mdui-textfield-error">验证码不能为空</div>
					    <div class="mdui-textfield-helper">请输入验证码</div>
				</div>
				<input type="submit" class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple "  id="submit-login" value="登录" />
				<!--mdui-dialog="{target: '#example-1'}"-->
			    </form>
            </div>
            
		</div>
			
		<!--注册模块-->
		<div id="regist" class="mdui-p-a-2">
			<form action="${pageContext.request.contextPath }/UserServlet" method="post" id = "form-regist">
				<!--用户名-->
				<input type="hidden" name="method" value="regist">
				<div class="mdui-textfield mdui-textfield-floating-label">
					    <i class="mdui-icon material-icons">account_circle</i>
					    <label class="mdui-textfield-label">User name</label>
					    <input class="mdui-textfield-input" type="text" name="username" required/ maxlength="20" id="r-username">
					    <div class="mdui-textfield-error " >用户名不能为空</div>
					    <div id="checkUsername"></div>
				</div>
				<!--手机号-->
				<div class="mdui-textfield mdui-textfield-floating-label">
					    <i class="mdui-icon material-icons">phone</i>
					    <label class="mdui-textfield-label">phone</label>
					    <input class="mdui-textfield-input" type="text" name="userphone" required/ maxlength="11">
					    <div class="mdui-textfield-error">手机号不能为空</div>
				</div>
				<!--邮箱-->
				<div class="mdui-textfield mdui-textfield-floating-label">
	    			<i class="mdui-icon material-icons">email</i>
					<label class="mdui-textfield-label">Email</label>
					<input class="mdui-textfield-input" type="email" name="useremail" required/>
					<div class="mdui-textfield-error">邮箱格式错误</div>
				</div>
				<!--第一次密码-->
				<div class="mdui-textfield mdui-textfield-floating-label" >
					<i class="mdui-icon material-icons">lock</i>
				    <label class="mdui-textfield-label">Password</label>
				    <input class="mdui-textfield-input" type="password" name="password" id="iniPwd" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" required/>
				    <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
				    <div class="mdui-textfield-helper">请输入至少 6 位，且包含大小写字母的密码</div>
				</div>
		  		<!--第二次密码-->
		  		<div class="mdui-textfield mdui-textfield-floating-label" >
					<i class="mdui-icon material-icons">lock</i>
				    <label class="mdui-textfield-label">Password</label>
				    <input class="mdui-textfield-input" type="password" name="password_again" id="checkPwd" required/>
				    <div class="mdui-textfield-helper" id="error-message">请重新输入密码</div>
				</div>
		  		
		  		<input type="button" class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple " id="submit-regist" value="注册" />
		  		
			</form>	
		</div>
	</div>
	
	
	<div class="mdui-dialog" id="dialogDoubleCheckDisMatch">
	    <div class="mdui-dialog-title">Promption</div>
	    <div class="mdui-dialog-content" id="dialog-msg">两次密码输入不一致</div>
	    
	    <div class="mdui-dialog-actions">
	      <button class="mdui-btn mdui-ripple" mdui-dialog-close>确定</button>
	    </div>
  	</div>
  	
  	
	
	
	</body>
</html>
